<template>
    <div>
        <nav-bar>
            <template #default>分类</template>
        </nav-bar>

        <div id="mainbox">
            <div class="ordertab">
                <van-tabs v-model="active" @click="tabClick">
                    <van-tab title="销量排序"></van-tab>
                    <van-tab title="价格排序"></van-tab>
                    <van-tab title="评价排序"></van-tab>
                </van-tabs>

            </div>

            <van-collapse class="leftmenu" v-model="activeName" accordion>
                <van-collapse-item v-for="item in categories" :key="item.id" :title="item.name" :name="item.name">

                    <van-sidebar v-model="activeKey">
                        <van-sidebar-item v-for="sub in item.children" :title="sub.name" :key="sub.id"
                                          @click="getGoods(sub.id)"/>

                    </van-sidebar>


                </van-collapse-item>

            </van-collapse>

            <!--                        v-for="item in showGoods" :key="item.id"-->
            <div class="goodslist">
                <div class="content">
                    <van-card
                        v-for="item in showGoods" :key="item.id"
                        @click="itemClick(item.id)"
                        :num="item.comments_count"
                        :tag="item.comments_count >= 0 ? 'aaa' : 'bbb'     "
                        :price="item.price"
                        :desc="item.updated_at"
                        :title="item.title"
                        :thumb="item.cover_url"
                        :lazy-load="true"
                    />
                </div>
            </div>

        </div>
        <back-top @bTop="bTop" v-show="isShowBackTop"></back-top>
    </div>
</template>

<script>
import {ref, reactive, onMounted, computed,watchEffect,nextTick} from "vue";

import NavBar from "@/components/common/navbar/NavBar.vue";
import {getCategory,getCategoryGoods} from "@/network/category";
import BScroll from 'better-scroll';
import {getHomeGoods} from "@/network/home";
import BackTop from "@/components/common/backtop/BackTop.vue";
import {useRouter} from "vue-router";

export default {
    name: "Categroy",

    setup() {
        const router = useRouter();
        let active = ref(1)
        let activeKey = ref(0);
        let categories = ref([]);
        let activeName = ref(1);
        //声明当前排序条件
        let currentOrder = ref('sales')
        let isShowBackTop = ref(false);
        //当前的分类id
        let currentCid = ref(0)

        //数据模型
        const goods = reactive({
            sales:{page:1,list:[]},
            price:{page:1,list:[]},
            comments_count:{page:1,list:[]}
        })

        const showGoods = computed(()=>{
            return goods[currentOrder.value].list;
        })

        const init = ()=>{
            getCategoryGoods('sales',currentCid.value).then(res=>{
                goods.sales.list = res.goods.data;
            })
            getCategoryGoods('price',currentCid.value).then(res=>{
                goods.price.list = res.goods.data;
            })
            getCategoryGoods('comments_count',currentCid.value).then(res=>{
                goods.comments_count.list = res.goods.data;
            })
        }
        let bscroll = reactive({})
        onMounted(() => {
            getCategory().then(res => {
                categories.value = res.categories
                // console.log(categories.value);
            })
            init();
            bscroll = new BScroll(document.querySelector('.goodslist'), {
                probeType: 3,   // 0，在任何时候都不派发 scroll 事件，
                // 1，仅仅当手指按在滚动区域上，每隔 momentumLimitTime 毫秒派发一次 scroll 事件，
                // 2，仅仅当手指按在滚动区域上，一直派发 scroll 事件，
                // 3，任何时候都派发 scroll 事件，包括调用 scrollTo 或者触发 momentum 滚动动画
                click: true,//是否允许点击
                pullUpLoad: true //上拉加载更多，默认false
            });
            bscroll.on('scroll', (position) => {
                // console.log(banref.value.offsetHeight);
                // bscroll.refresh();
                //   console.log(position.y)
                isShowBackTop.value =  (-position.y) > 300;
            })

            bscroll.on('pullingUp', () => {
                // console.log('上拉加载更多')

                const page = goods[currentOrder.value].page +1;
                getCategoryGoods(currentOrder.value,currentCid.value).then(res=>{
                    goods[currentOrder.value].list.push(...res.goods.data);
                    goods[currentOrder.value].page +=1;
                })
                //完成上拉、等数据请求完成、要将新数据展示出来
                bscroll.finishPullUp();

                //重新计算高度
                nextTick(() => {
                    //重新计算高度
                    bscroll && bscroll.refresh();
                })
                console.log(document.querySelector('.content').clientHeight)
                console.log('当前类型' + currentOrder.value, '当前页' + page)


            })
        })
        //排序选项卡
        const tabClick = (index) => {

            //声明一个排序的数组
            let orders = ['sales', 'price', 'comments_count'] //sales-销量 、recommend-推荐、price-价格、comments_count 评论数排序。  值为1， 倒序， 值为2，正序
            currentOrder.value = orders[index];
            getCategoryGoods(currentOrder.value,currentCid.value).then(res=>{
                goods[currentOrder.value].list = res.goods.data;
                nextTick(() => {
                    //重新计算高度
                    bscroll && bscroll.refresh();
                })
            })

            console.log("分类ID  " + currentCid.value);
            console.log("排序的序号" + currentOrder.value);
        }
        //通过分类get商品数据
        const getGoods = (cid) => {
            currentCid.value = cid;
            init();
            console.log("分类ID  " + currentCid.value);
            console.log("排序的序号" + currentOrder.value);
        }

        //监听 任何一个变量有变
        watchEffect(() => {
            nextTick(() => {
                //重新计算高度
                bscroll && bscroll.refresh();
            })
        })
        const bTop = () => {
            // console.log('111')
            bscroll.scrollTo(0, 0, 600)
        }

        return {
            activeKey,
            categories,
            activeName,
            active,
            tabClick,
            currentOrder,
            currentCid,
            getGoods,
            goods,
            showGoods,
            bscroll,
            isShowBackTop,
            bTop,
            itemClick:(id)=>{
                router.push({path:'/detail',query:{id}});
            }
        }
    },
    components: {
        NavBar,
        BackTop
    },
}
</script>
<style scoped lang="scss">
#mainbox {
    margin-top: 45px;
    display: flex;

    .ordertab {
        flex: 1;
        height: 50px;
        position: fixed;
        top: 45px;
        right: 0;
        left: 130px;
        z-index:88;
    }

    .leftmenu {
        width: 130px;
        position: fixed;
        top: 95px;
        left: 0;
        height: 8cd0vh;
        overflow: scroll;
    }

    .goodslist {
        flex: 1;
        position: absolute;
        padding: 10px;
        top: 100px;
        left: 130px;
        right: 0px;
        height: 100vh;
        text-align: left;
        .content{
            //padding-top:100px;
        }
    }
}
</style>